/*
* @Date: 2019-08-22 09:13:08
* @Last Modified time: 2019-08-22 09:13:08
* @Content:快速定位包括里程定位和车站定位
*/
<template>
  <div class="quickLocation">
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item,index) in levelList" :key="index">
          <span class="no-redirect" @click.prevent="handleLink(item)">{{ item.properties.NAME }}</span>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
    <div>
      <el-row v-for="row in rows" :key="row.id">
        <el-col v-for="s in row.data" :span="8" :key="s.id">
          <div class="card" @click="onSymbolSelected(s)">
            <span class="loc-Item">{{ s.properties.NAME }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { qxjList } from '@/api/poi'
  import { mapState } from 'vuex'
  import BoxUtil from '@/assets/js/utils/BoxUtil'
  export default {
    data() {
      return {
        levelList: [],
        symbols: [],
        allQxj: []
      }
    },
    mounted: function() {
      qxjList().then(res => {
        // 显示列表
        const data = res.data
        this.allQxj = data
        this.levelList = this.allQxj.filter(a => a.properties.PID === '0')
        this.symbols = this.allQxj.filter(a => a.properties.PID === this.levelList[0].properties.CLASID)
      })
      // 清除区县界
      this.bus.$on('map.qxj.clear', this.setHighLightResult)
    },
    methods: {
      handleLink(item) {
        this.setHighLightResult([item])
        var bounds = BoxUtil.getCoordinatesBounds(item.geometry.coordinates[0])
        this.mapService.flyTo(item.geometry)
        const index = this.levelList.indexOf(item)
        this.levelList.splice(index + 1, this.levelList.length - 1)
        this.symbols = this.allQxj.filter(a => a.properties.PID === item.properties.CLASID)
      },
      // 定位  高亮
      onSymbolSelected(item) {
        this.setHighLightResult([item])
        this.mapService.flyTo(item.geometry)
        const filter = this.allQxj.filter(a => a.properties.PID === item.properties.CLASID)
        if (filter.length === 0) {
          return
        }
        this.levelList.push(item)
        this.symbols = this.allQxj.filter(a => a.properties.PID === item.properties.CLASID)
      },

      /**
       * 设置高亮
       */
      setHighLightResult(item) {
        this.mapService.setData('qxj', { type: 'FeatureCollection', features: item })
      }
    },
    computed: {
      ...mapState({
        mapService(state) {
          return state.eswyzt.mapService
        }
      }),

      rows() {
        const rows = []
        if (!this.symbols) {
          return rows
        }
        const row = Math.ceil(this.symbols.length / 3)
        for (var i = 0; i < row; i++) {
          const start = i * 3
          const end = (i + 1) * 3
          rows.push({
            id: i,
            data: this.symbols.slice(
              start,
              end > this.symbols.length ? this.symbols.length : end
            )
          })
        }
        return rows
      }
    },
    beforeDestroy() {
      this.bus.$off('map.qxj.clear', this.setHighLightResult)
    }
  }
</script>

<style>
  .quickLocation {
    position: relative;
    height: 100%;
    z-index: 999;
    margin-top: -12px;
    font-size: 0.8em;
  }

  .quickLocation .quickLocationTab {
    line-height: 30px;
  }

  .quickLocation .quickLocationTabActivate {
    color: #398f86ff;
  }

  .quickLocation .el-input__inner {
    border-radius: 0em;
    background-color: #00000000;

    height: 30px;

  }

  .quickLocation .el-select-dropdown__item.hover {
    background-color: #fff0;
  }

  .quickLocation .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #0003;
  }

  .quickLocation .grid-content {
    border-radius: 0px;
    min-height: 36px;
    text-align: center;
  }

  .quickLocation .el-form-item {
    margin-bottom: 5px;
  }

  .quickLocation .el-button + .el-button {
    margin-left: 100px;
  }

  .quickLocation .el-button {
    padding: 5px 20px;
    border-radius: 0px;
    background-color: #fff0;

    margin-bottom: 1em;
  }

  .app-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-left: 10px;

  }

  .app-breadcrumb.el-breadcrumb .no-redirect {
    cursor: pointer;
  }

  .no-redirect{
    color:#619794;
  }

  .loc-Item:hover {
    color:#619794;
    border-bottom: 1px solid #619794;
  }
</style>

</style>

